<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>社交网站文章详情底部组件</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    :root {
      --primary: #007bff;
      --secondary: #6c757d;
      --light: #f8f9fa;
      --dark: #343a40;
      --white: #ffffff;
      --shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
      --border: #eee;
      
      /* 主题色 */
      --theme1: #1877F2; /* 社交蓝 */
      --theme2: #E4405F; /* 活力粉 */
      --theme3: #00C853; /* 清新绿 */
      --theme4: #212529; /* 商务黑 */
      --theme5: #FF9800; /* 温暖橙 */
      --theme6: #9C27B0; /* 个性紫 */
    }
    
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background-color: #f5f5f5;
      color: var(--dark);
      min-height: 100vh;
      padding: 0;
      margin: 0;
      position: relative;
    }
    
    .container {
      max-width: 420px;
      margin: 0 auto;
      background-color: var(--white);
      min-height: 100vh;
      box-shadow: var(--shadow);
      overflow: hidden;
      position: relative;
    }
    
    /* 页面内容 */
    .page-header {
      padding: 15px 20px;
      border-bottom: 1px solid var(--border);
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .page-title {
      font-size: 20px;
      font-weight: 600;
      margin: 0;
    }
    
    .content-area {
      padding: 0;
      height: calc(100vh - 60px);
      overflow-y: auto;
    }
    
    .article-preview {
      padding: 15px;
    }
    
    .preview-image {
      width: 100%;
      height: 220px;
      object-fit: cover;
      border-radius: 12px;
      margin-bottom: 15px;
    }
    
    .preview-title {
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 10px;
      line-height: 1.3;
    }
    
    .preview-meta {
      display: flex;
      justify-content: space-between;
      font-size: 12px;
      color: #666;
      margin-bottom: 15px;
    }
    
    .preview-excerpt {
      font-size: 15px;
      line-height: 1.6;
      color: #333;
    }
    
    .read-more {
      display: block;
      margin: 15px 0;
      color: var(--primary);
      font-size: 15px;
      font-weight: 500;
      text-align: center;
      cursor: pointer;
    }
    
    /* 底部组件容器 */
    .bottom-container {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      max-width: 420px;
      margin: 0 auto;
      background-color: var(--white);
      z-index: 1000;
      transform: translateY(100%);
      transition: transform 0.3s ease;
      box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
      border-top-left-radius: 16px;
      border-top-right-radius: 16px;
    }
    
    .bottom-container.active {
      transform: translateY(0);
    }
    
    .bottom-drag-handle {
      width: 40px;
      height: 4px;
      background-color: #ddd;
      border-radius: 2px;
      margin: 8px auto;
    }
    
    .bottom-header {
      padding: 15px 20px 10px;
      border-bottom: 1px solid var(--border);
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .bottom-title {
      font-size: 18px;
      font-weight: 600;
      margin: 0;
    }
    
    .close-bottom {
      background: none;
      border: none;
      font-size: 20px;
      color: var(--dark);
      cursor: pointer;
    }
    
    .bottom-content {
      max-height: 70vh;
      overflow-y: auto;
      padding: 15px 20px;
    }
    
    /* 文章详情样式1 - 标准社交风格 */
    .article-style1 .author-section {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 15px;
      padding-bottom: 15px;
      border-bottom: 1px solid var(--border);
    }
    
    .article-style1 .author-avatar {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      object-fit: cover;
    }
    
    .article-style1 .author-info {
      flex: 1;
    }
    
    .article-style1 .author-name {
      font-weight: 600;
      margin-bottom: 3px;
    }
    
    .article-style1 .author-meta {
      font-size: 12px;
      color: #666;
    }
    
    .article-style1 .follow-btn {
      padding: 6px 14px;
      border-radius: 20px;
      font-size: 13px;
      font-weight: 500;
      background-color: var(--primary);
      color: white;
      border: none;
    }
    
    .article-style1 .article-image {
      width: 100%;
      border-radius: 12px;
      margin-bottom: 15px;
    }
    
    .article-style1 .article-title {
      font-size: 20px;
      font-weight: 700;
      margin-bottom: 15px;
      line-height: 1.4;
    }
    
    .article-style1 .article-content {
      font-size: 15px;
      line-height: 1.7;
      margin-bottom: 20px;
    }
    
    .article-style1 .article-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 20px;
      padding-top: 15px;
      border-top: 1px solid var(--border);
    }
    
    .article-style1 .article-tag {
      background-color: rgba(0, 0, 0, 0.05);
      padding: 5px 12px;
      border-radius: 15px;
      font-size: 13px;
    }
    
    /* 文章详情样式2 - 简约卡片风格 */
    .article-style2 .article-card {
      background-color: rgba(0, 0, 0, 0.02);
      border-radius: 16px;
      overflow: hidden;
      margin-bottom: 15px;
    }
    
    .article-style2 .article-image {
      width: 100%;
      height: 180px;
      object-fit: cover;
    }
    
    .article-style2 .card-content {
      padding: 15px;
    }
    
    .article-style2 .article-title {
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 10px;
      line-height: 1.3;
    }
    
    .article-style2 .meta-row {
      display: flex;
      justify-content: space-between;
      font-size: 12px;
      color: #666;
      margin-bottom: 15px;
    }
    
    .article-style2 .author {
      display: flex;
      align-items: center;
      gap: 6px;
    }
    
    .article-style2 .author-avatar {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      object-fit: cover;
    }
    
    .article-style2 .article-content {
      font-size: 14px;
      line-height: 1.6;
      margin-bottom: 15px;
    }
    
    .article-style2 .stats {
      display: flex;
      gap: 15px;
      font-size: 13px;
      color: #666;
    }
    
    .article-style2 .stat-item {
      display: flex;
      align-items: center;
      gap: 4px;
    }
    
    /* 文章详情样式3 - 杂志风格 */
    .article-style3 .article-header {
      margin-bottom: 20px;
    }
    
    .article-style3 .category-badge {
      display: inline-block;
      background-color: var(--primary);
      color: white;
      padding: 3px 10px;
      border-radius: 4px;
      font-size: 12px;
      font-weight: 500;
      margin-bottom: 10px;
    }
    
    .article-style3 .article-title {
      font-size: 22px;
      font-weight: 700;
      line-height: 1.4;
      margin-bottom: 15px;
    }
    
    .article-style3 .meta-line {
      display: flex;
      justify-content: space-between;
      font-size: 13px;
      color: #666;
      padding-bottom: 15px;
      border-bottom: 1px solid var(--border);
      margin-bottom: 15px;
    }
    
    .article-style3 .article-image {
      width: 100%;
      border-radius: 8px;
      margin-bottom: 15px;
    }
    
    .article-style3 .image-caption {
      font-size: 12px;
      color: #666;
      text-align: center;
      margin-bottom: 20px;
    }
    
    .article-style3 .article-content {
      font-size: 15px;
      line-height: 1.8;
      margin-bottom: 20px;
    }
    
    .article-style3 .quote-block {
      border-left: 3px solid var(--primary);
      padding-left: 15px;
      margin: 20px 0;
      font-style: italic;
      color: #555;
    }
    
    /* 文章详情样式4 - 深色阅读风格 */
    .article-style4 .article-container {
      color: #e0e0e0;
    }
    
    .article-style4 .article-title {
      font-size: 20px;
      font-weight: 600;
      margin-bottom: 15px;
      line-height: 1.4;
    }
    
    .article-style4 .meta-info {
      display: flex;
      justify-content: space-between;
      font-size: 12px;
      color: #aaa;
      margin-bottom: 20px;
      padding-bottom: 15px;
      border-bottom: 1px solid #333;
    }
    
    .article-style4 .article-image {
      width: 100%;
      border-radius: 8px;
      margin-bottom: 20px;
    }
    
    .article-style4 .article-content {
      font-size: 15px;
      line-height: 1.7;
      margin-bottom: 20px;
    }
    
    .article-style4 .content-section {
      margin-bottom: 25px;
    }
    
    .article-style4 .section-title {
      font-size: 17px;
      font-weight: 600;
      margin-bottom: 10px;
      color: white;
    }
    
    /* 文章详情样式5 - 图文混排风格 */
    .article-style5 .article-title {
      font-size: 20px;
      font-weight: 600;
      margin-bottom: 15px;
      line-height: 1.4;
    }
    
    .article-style5 .author-bar {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 20px;
    }
    
    .article-style5 .author-avatar {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      object-fit: cover;
    }
    
    .article-style5 .author-details {
      flex: 1;
    }
    
    .article-style5 .author-name {
      font-weight: 500;
      font-size: 14px;
    }
    
    .article-style5 .post-time {
      font-size: 12px;
      color: #666;
    }
    
    .article-style5 .content-block {
      margin-bottom: 25px;
    }
    
    .article-style5 .content-text {
      font-size: 15px;
      line-height: 1.7;
      margin-bottom: 15px;
    }
    
    .article-style5 .inline-image {
      width: 100%;
      border-radius: 8px;
      margin-bottom: 15px;
    }
    
    .article-style5 .image-group {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      margin-bottom: 15px;
    }
    
    .article-style5 .image-group img {
      width: 100%;
      height: 120px;
      object-fit: cover;
      border-radius: 6px;
    }
    
    /* 文章详情样式6 - 互动增强风格 */
    .article-style6 .article-title {
      font-size: 19px;
      font-weight: 600;
      margin-bottom: 15px;
      line-height: 1.4;
    }
    
    .article-style6 .article-image {
      width: 100%;
      border-radius: 10px;
      margin-bottom: 15px;
    }
    
    .article-style6 .article-content {
      font-size: 15px;
      line-height: 1.7;
      margin-bottom: 20px;
    }
    
    .article-style6 .interaction-bar {
      display: flex;
      justify-content: space-between;
      padding: 12px 0;
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
      margin-bottom: 20px;
    }
    
    .article-style6 .interaction-btn {
      display: flex;
      align-items: center;
      gap: 6px;
      background: none;
      border: none;
      color: #666;
      font-size: 14px;
    }
    
    .article-style6 .highlight {
      color: var(--primary);
    }
    
    .article-style6 .reader-comments {
      margin-top: 25px;
    }
    
    .article-style6 .comments-title {
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 15px;
    }
    
    .article-style6 .comment-item {
      display: flex;
      gap: 10px;
      margin-bottom: 15px;
    }
    
    .article-style6 .comment-avatar {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      object-fit: cover;
    }
    
    .article-style6 .comment-content {
      flex: 1;
      background-color: rgba(0, 0, 0, 0.03);
      padding: 10px 12px;
      border-radius: 10px;
    }
    
    .article-style6 .comment-header {
      font-size: 13px;
      font-weight: 500;
      margin-bottom: 5px;
    }
    
    .article-style6 .comment-text {
      font-size: 14px;
    }
    
    /* 底部操作栏 */
    .action-bar {
      display: flex;
      justify-content: space-around;
      padding: 12px 0;
      border-top: 1px solid var(--border);
      background-color: var(--white);
      position: sticky;
      bottom: 0;
      z-index: 100;
    }
    
    .action-button {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 5px;
      background: none;
      border: none;
      color: var(--dark);
      font-size: 12px;
      cursor: pointer;
      padding: 5px 10px;
    }
    
    .action-icon {
      font-size: 18px;
    }
    
    /* 样式切换器 */
    .style-switcher {
      position: fixed;
      top: 20px;
      right: 20px;
      z-index: 1000;
      background-color: white;
      border-radius: 8px;
      box-shadow: var(--shadow);
      overflow: hidden;
      width: 180px;
    }
    
    .switcher-header {
      padding: 10px 16px;
      font-size: 14px;
      font-weight: 600;
      border-bottom: 1px solid #eee;
    }
    
    .switcher-option {
      padding: 12px 16px;
      font-size: 14px;
      cursor: pointer;
    }
    
    .switcher-option:hover {
      background-color: #f9f9f9;
    }
    
    .switcher-option.active {
      background-color: var(--primary);
      color: white;
    }
    
    /* 遮罩层 */
    .overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0, 0, 0, 0.5);
      z-index: 999;
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s ease;
    }
    
    .overlay.active {
      opacity: 1;
      visibility: visible;
    }
    
    /* 主题样式 */
    .theme1 { --primary: var(--theme1); }
    .theme2 { --primary: var(--theme2); }
    .theme3 { --primary: var(--theme3); }
    .theme4 { --primary: var(--theme4); }
    .theme5 { --primary: var(--theme5); }
    .theme6 { --primary: var(--theme6); }
    
    /* 主题1：社交蓝 */
    .theme1 .bottom-container {
      background-color: #f9fafd;
    }
    
    .theme1 .article-tag,
    .theme1 .comment-content {
      background-color: rgba(24, 119, 242, 0.05);
    }
    
    /* 主题2：活力粉 */
    .theme2 .bottom-container {
      background-color: #fff5f8;
    }
    
    .theme2 .article-tag,
    .theme2 .comment-content {
      background-color: rgba(228, 64, 95, 0.05);
    }
    
    /* 主题3：清新绿 */
    .theme3 .bottom-container {
      background-color: #f0fff4;
    }
    
    .theme3 .article-tag,
    .theme3 .comment-content {
      background-color: rgba(0, 200, 83, 0.05);
    }
    
    /* 主题4：商务黑 */
    .theme4 {
      --border: #333;
      --dark: white;
    }
    
    .theme4 .container,
    .theme4 .bottom-container,
    .theme4 .action-bar,
    .theme4 .article-card {
      background-color: #121212;
    }
    
    .theme4 .preview-excerpt,
    .theme4 .meta-info,
    .theme4 .image-caption,
    .theme4 .stats,
    .theme4 .author-meta,
    .theme4 .switcher-header,
    .theme4 .close-bottom,
    .theme4 .action-button {
      color: #aaa;
    }
    
    .theme4 .article-tag,
    .theme4 .comment-content {
      background-color: rgba(255, 255, 255, 0.05);
    }
    
    .theme4 .bottom-drag-handle {
      background-color: #444;
    }
    
    /* 主题5：温暖橙 */
    .theme5 .bottom-container {
      background-color: #fff8e6;
    }
    
    .theme5 .article-tag,
    .theme5 .comment-content {
      background-color: rgba(255, 152, 0, 0.05);
    }
    
    /* 主题6：个性紫 */
    .theme6 .bottom-container {
      background-color: #f3e5f5;
    }
    
    .theme6 .article-tag,
    .theme6 .comment-content {
      background-color: rgba(156, 39, 176, 0.1);
    }
    
    /* 动画 */
    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }
    
    .bottom-enter {
      animation: fadeIn 0.3s;
    }
  </style>
</head>
<body>
  <!-- 样式切换器 -->
  <div class="style-switcher">
    <div class="switcher-header">选择文章详情样式</div>
    <div class="switcher-option active" data-style="1">社交标准</div>
    <div class="switcher-option" data-style="2">简约卡片</div>
    <div class="switcher-option" data-style="3">杂志风格</div>
    <div class="switcher-option" data-style="4">深色阅读</div>
    <div class="switcher-option" data-style="5">图文混排</div>
    <div class="switcher-option" data-style="6">互动增强</div>
  </div>
  
  <div class="container theme1">
    <div class="page-header">
      <h1 class="page-title">文章详情</h1>
      <button class="menu-toggle">
        <i class="fa fa-ellipsis-v"></i>
      </button>
    </div>
    
    <div class="content-area">
      <div class="article-preview">
        <img src="https://picsum.photos/id/26/800/600" alt="文章图片" class="preview-image">
        <h2 class="preview-title">城市公园新景观开放，打造市民周末休闲新选择</h2>
        <div class="preview-meta">
          <span>城市生活报</span>
          <span>2小时前 · 2.5k 阅读</span>
        </div>
        <p class="preview-excerpt">
          本市中心公园经过三个月的改造升级，已于上周末正式对市民开放。改造后的公园新增了多处景观和休闲设施，包括2.5公里的健身步道、升级的儿童游乐区和多个观景平台，成为市民周末休闲的新选择...
        </p>
        <span class="read-more" id="readMore">点击查看全文 <i class="fa fa-angle-down"></i></span>
      </div>
    </div>
    
    <!-- 底部操作栏 -->
    <div class="action-bar">
      <button class="action-button" data-action="like">
        <i class="fa fa-heart-o action-icon"></i>
        <span>喜欢</span>
      </button>
      <button class="action-button" data-action="comment">
        <i class="fa fa-comment-o action-icon"></i>
        <span>评论</span>
      </button>
      <button class="action-button" data-action="share">
        <i class="fa fa-share-alt action-icon"></i>
        <span>分享</span>
      </button>
      <button class="action-button" data-action="bookmark">
        <i class="fa fa-bookmark-o action-icon"></i>
        <span>收藏</span>
      </button>
      <button class="action-button" data-action="more">
        <i class="fa fa-ellipsis-h action-icon"></i>
        <span>更多</span>
      </button>
    </div>
  </div>
  
  <!-- 底部组件1 - 社交标准样式 -->
  <div class="bottom-container article-style1 theme1" id="bottom1">
    <div class="bottom-drag-handle"></div>
    <div class="bottom-header">
      <h3 class="bottom-title">文章详情</h3>
      <button class="close-bottom">
        <i class="fa fa-times"></i>
      </button>
    </div>
    <div class="bottom-content">
      <div class="author-section">
        <img src="https://picsum.photos/id/64/100" alt="作者头像" class="author-avatar">
        <div class="author-info">
          <div class="author-name">城市生活报</div>
          <div class="author-meta">官方账号 · 发布于 2小时前</div>
        </div>
        <button class="follow-btn">关注</button>
      </div>
      
      <h2 class="article-title">城市公园新景观开放，打造市民周末休闲新选择</h2>
      
      <img src="https://picsum.photos/id/26/800/600" alt="文章图片" class="article-image">
      
      <div class="article-content">
        本市中心公园经过三个月的改造升级，已于上周末正式对市民开放。改造后的公园新增了多处景观和休闲设施，成为市民周末休闲的新选择。<br><br>
        
        据了解，此次改造工程投资约2000万元，重点提升了公园的休闲功能和景观品质。新增的2.5公里健身步道环绕整个公园，沿途设置了5个休息区和3个观景台，方便市民健身和休憩。<br><br>
        
        儿童游乐区也进行了全面升级，根据不同年龄段儿童的需求，设置了幼儿活动区、学龄儿童活动区和青少年挑战区，新增了滑梯、秋千、攀爬网等20余种游乐设施，并配备了专业的安全监护人员，确保儿童游玩安全。<br><br>
        
        公园负责人表示，此次改造旨在为市民提供更好的休闲环境，同时推广健康生活方式。未来还将定期举办各类文化活动和健康讲座，丰富市民的精神文化生活。
      </div>
      
      <div class="article-tags">
        <span class="article-tag">城市建设</span>
        <span class="article-tag">休闲娱乐</span>
        <span class="article-tag">健康生活</span>
        <span class="article-tag">本地新闻</span>
        <span class="article-tag">公园</span>
      </div>
    </div>
  </div>
  
  <!-- 底部组件2 - 简约卡片样式 -->
  <div class="bottom-container article-style2 theme1" id="bottom2">
    <div class="bottom-drag-handle"></div>
    <div class="bottom-header">
      <h3 class="bottom-title">文章详情</h3>
      <button class="close-bottom">
        <i class="fa fa-times"></i>
      </button>
    </div>
    <div class="bottom-content">
      <div class="article-card">
        <img src="https://picsum.photos/id/26/800/600" alt="文章图片" class="article-image">
        <div class="card-content">
          <h2 class="article-title">城市公园新景观开放，打造市民周末休闲新选择</h2>
          
          <div class="meta-row">
            <div class="author">
              <img src="https://picsum.photos/id/64/100" alt="作者头像" class="author-avatar">
              <span>城市生活报</span>
            </div>
            <div class="time">2小时前</div>
          </div>
          
          <div class="article-content">
            本市中心公园经过三个月的改造升级，已于上周末正式对市民开放。改造后的公园新增了多处景观和休闲设施，成为市民周末休闲的新选择。<br><br>
            
            据了解，此次改造工程投资约2000万元，重点提升了公园的休闲功能和景观品质。新增的2.5公里健身步道环绕整个公园，沿途设置了5个休息区和3个观景台...
          </div>
          
          <div class="stats">
            <div class="stat-item"><i class="fa fa-eye"></i> 2.5k</div>
            <div class="stat-item"><i class="fa fa-comment"></i> 42</div>
            <div class="stat-item"><i class="fa fa-heart"></i> 138</div>
            <div class="stat-item"><i class="fa fa-share"></i> 24</div>
          </div>
        </div>
      </div>
      
      <div class="article-content">
        儿童游乐区也进行了全面升级，根据不同年龄段儿童的需求，设置了幼儿活动区、学龄儿童活动区和青少年挑战区，新增了滑梯、秋千、攀爬网等20余种游乐设施，并配备了专业的安全监护人员，确保儿童游玩安全。<br><br>
        
        公园负责人表示，此次改造旨在为市民提供更好的休闲环境，同时推广健康生活方式。未来还将定期举办各类文化活动和健康讲座，丰富市民的精神文化生活。<br><br>
        
        市民反响热烈，周末两天接待游客超过5万人次，不少家庭表示新公园设施完善，环境优美，是周末亲子活动的好去处。
      </div>
    </div>
  </div>
  
  <!-- 底部组件3 - 杂志风格样式 -->
  <div class="bottom-container article-style3 theme1" id="bottom3">
    <div class="bottom-drag-handle"></div>
    <div class="bottom-header">
      <h3 class="bottom-title">文章详情</h3>
      <button class="close-bottom">
        <i class="fa fa-times"></i>
      </button>
    </div>
    <div class="bottom-content">
      <div class="article-header">
        <span class="category-badge">城市发展</span>
        <h2 class="article-title">城市公园新景观开放，打造市民周末休闲新选择</h2>
        <div class="meta-line">
          <div class="author">城市生活报</div>
          <div class="publish-date">2023年6月15日</div>
        </div>
      </div>
      
      <img src="https://picsum.photos/id/26/800/600" alt="文章图片" class="article-image">
      <div class="image-caption">改造后的中心公园一角，新增的观景台成为热门打卡点</div>
      
      <div class="article-content">
        本市中心公园经过三个月的改造升级，已于上周末正式对市民开放。改造后的公园新增了多处景观和休闲设施，成为市民周末休闲的新选择。
      </div>
      
      <div class="quote-block">
        "此次改造旨在为市民提供更好的休闲环境，同时推广健康生活方式。"
      </div>
      
      <div class="article-content">
        据了解，此次改造工程投资约2000万元，重点提升了公园的休闲功能和景观品质。新增的2.5公里健身步道环绕整个公园，沿途设置了5个休息区和3个观景台，方便市民健身和休憩。<br><br>
        
        儿童游乐区也进行了全面升级，根据不同年龄段儿童的需求，设置了幼儿活动区、学龄儿童活动区和青少年挑战区，新增了滑梯、秋千、攀爬网等20余种游乐设施，并配备了专业的安全监护人员，确保儿童游玩安全。<br><br>
        
        未来还将定期举办各类文化活动和健康讲座，丰富市民的精神文化生活。
      </div>
    </div>
  </div>
  
  <!-- 底部组件4 - 深色阅读样式 -->
  <div class="bottom-container article-style4 theme1" id="bottom4">
    <div class="bottom-drag-handle"></div>
    <div class="bottom-header">
      <h3 class="bottom-title">文章详情</h3>
      <button class="close-bottom">
        <i class="fa fa-times"></i>
      </button>
    </div>
    <div class="bottom-content">
      <div class="article-container">
        <h2 class="article-title">城市公园新景观开放，打造市民周末休闲新选择</h2>
        
        <div class="meta-info">
          <div class="author">城市生活报</div>
          <div class="post-meta">2小时前 · 2.5k 阅读</div>
        </div>
        
        <img src="https://picsum.photos/id/26/800/600" alt="文章图片" class="article-image">
        
        <div class="article-content">
          本市中心公园经过三个月的改造升级，已于上周末正式对市民开放。改造后的公园新增了多处景观和休闲设施，成为市民周末休闲的新选择。
        </div>
        
        <div class="content-section">
          <h3 class="section-title">改造亮点</h3>
          <div class="article-content">
            据了解，此次改造工程投资约2000万元，重点提升了公园的休闲功能和景观品质。新增的2.5公里健身步道环绕整个公园，沿途设置了5个休息区和3个观景台，方便市民健身和休憩。
          </div>
        </div>
        
        <div class="content-section">
          <h3 class="section-title">家庭友好设施</h3>
          <div class="article-content">
            儿童游乐区也进行了全面升级，根据不同年龄段儿童的需求，设置了幼儿活动区、学龄儿童活动区和青少年挑战区，新增了滑梯、秋千、攀爬网等20余种游乐设施，并配备了专业的安全监护人员，确保儿童游玩安全。
          </div>
        </div>
        
        <div class="content-section">
          <h3 class="section-title">未来规划</h3>
          <div class="article-content">
            公园负责人表示，此次改造旨在为市民提供更好的休闲环境，同时推广健康生活方式。未来还将定期举办各类文化活动和健康讲座，丰富市民的精神文化生活。
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 底部组件5 - 图文混排样式 -->
  <div class="bottom-container article-style5 theme1" id="bottom5">
    <div class="bottom-drag-handle"></div>
    <div class="bottom-header">
      <h3 class="bottom-title">文章详情</h3>
      <button class="close-bottom">
        <i class="fa fa-times"></i>
      </button>
    </div>
    <div class="bottom-content">
      <h2 class="article-title">城市公园新景观开放，打造市民周末休闲新选择</h2>
      
      <div class="author-bar">
        <img src="https://picsum.photos/id/64/100" alt="作者头像" class="author-avatar">
        <div class="author-details">
          <div class="author-name">城市生活报</div>
          <div class="post-time">2小时前 · 2.5k 阅读</div>
        </div>
      </div>
      
      <div class="content-block">
        <div class="content-text">
          本市中心公园经过三个月的改造升级，已于上周末正式对市民开放。改造后的公园新增了多处景观和休闲设施，成为市民周末休闲的新选择。
        </div>
        <img src="https://picsum.photos/id/26/800/600" alt="公园全景" class="inline-image">
      </div>
      
      <div class="content-block">
        <div class="content-text">
          据了解，此次改造工程投资约2000万元，重点提升了公园的休闲功能和景观品质。新增的2.5公里健身步道环绕整个公园，沿途设置了5个休息区和3个观景台。
        </div>
        <div class="image-group">
          <img src="https://picsum.photos/id/28/400/300" alt="健身步道">
          <img src="https://picsum.photos/id/29/400/300" alt="休息区">
        </div>
      </div>
      
      <div class="content-block">
        <div class="content-text">
          儿童游乐区也进行了全面升级，根据不同年龄段儿童的需求，设置了多个活动区域，新增了20余种游乐设施，并配备了专业的安全监护人员。
        </div>
        <img src="https://picsum.photos/id/30/800/600" alt="儿童游乐区" class="inline-image">
      </div>
      
      <div class="content-block">
        <div class="content-text">
          公园负责人表示，未来还将定期举办各类文化活动和健康讲座，丰富市民的精神文化生活。
        </div>
      </div>
    </div>
  </div>
  
  <!-- 底部组件6 - 互动增强样式 -->
  <div class="bottom-container article-style6 theme1" id="bottom6">
    <div class="bottom-drag-handle"></div>
    <div class="bottom-header">
      <h3 class="bottom-title">文章详情</h3>
      <button class="close-bottom">
        <i class="fa fa-times"></i>
      </button>
    </div>
    <div class="bottom-content">
      <h2 class="article-title">城市公园新景观开放，打造市民周末休闲新选择</h2>
      
      <img src="https://picsum.photos/id/26/800/600" alt="文章图片" class="article-image">
      
      <div class="interaction-bar">
        <button class="interaction-btn highlight">
          <i class="fa fa-heart"></i>
          <span>138</span>
        </button>
        <button class="interaction-btn">
          <i class="fa fa-comment"></i>
          <span>42 评论</span>
        </button>
        <button class="interaction-btn">
          <i class="fa fa-share"></i>
          <span>分享</span>
        </button>
        <button class="interaction-btn">
          <i class="fa fa-bookmark"></i>
          <span>收藏</span>
        </button>
      </div>
      
      <div class="article-content">
        本市中心公园经过三个月的改造升级，已于上周末正式对市民开放。改造后的公园新增了多处景观和休闲设施，成为市民周末休闲的新选择。<br><br>
        
        据了解，此次改造工程投资约2000万元，重点提升了公园的休闲功能和景观品质。新增的2.5公里健身步道环绕整个公园，沿途设置了5个休息区和3个观景台，方便市民健身和休憩。<br><br>
        
        儿童游乐区也进行了全面升级，根据不同年龄段儿童的需求，设置了幼儿活动区、学龄儿童活动区和青少年挑战区，新增了滑梯、秋千、攀爬网等20余种游乐设施，并配备了专业的安全监护人员，确保儿童游玩安全。
      </div>
      
      <div class="reader-comments">
        <div class="comments-title">读者评论 (42)</div>
        
        <div class="comment-item">
          <img src="https://picsum.photos/id/65/100" alt="用户头像" class="comment-avatar">
          <div class="comment-content">
            <div class="comment-header">李小明</div>
            <div class="comment-text">这个公园改造得真不错，周末带孩子去看看，有没有一起的？</div>
          </div>
        </div>
        
        <div class="comment-item">
          <img src="https://picsum.photos/id/91/100" alt="用户头像" class="comment-avatar">
          <div class="comment-content">
            <div class="comment-header">张大山</div>
            <div class="comment-text">健身步道修得很专业，昨晚去试跑了一下，感觉很好！</div>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 遮罩层 -->
  <div class="overlay"></div>
  
  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 当前状态
    let currentStyle = '1';
    let bottomOpen = false;
    let activeBottom = null;
    
    // DOM元素
    const container = document.querySelector('.container');
    const switcherOptions = document.querySelectorAll('.switcher-option');
    const bottomContainers = {
      '1': document.getElementById('bottom1'),
      '2': document.getElementById('bottom2'),
      '3': document.getElementById('bottom3'),
      '4': document.getElementById('bottom4'),
      '5': document.getElementById('bottom5'),
      '6': document.getElementById('bottom6')
    };
    const actionButtons = document.querySelectorAll('.action-button');
    const closeButtons = document.querySelectorAll('.close-bottom');
    const overlay = document.querySelector('.overlay');
    const readMoreBtn = document.getElementById('readMore');
    
    // 初始化
    function init() {
      // 设置初始激活的底部组件
      activeBottom = bottomContainers[currentStyle];
      
      // 样式切换事件
      switcherOptions.forEach(option => {
        option.addEventListener('click', function() {
          const style = this.getAttribute('data-style');
          switchStyle(style);
          openBottom();
        });
      });
      
      // 阅读全文按钮
      readMoreBtn.addEventListener('click', function() {
        openBottom();
      });
      
      // 底部操作按钮点击事件
      actionButtons.forEach(button => {
        button.addEventListener('click', function() {
          const action = this.getAttribute('data-action');
          handleAction(action);
        });
      });
      
      // 关闭按钮点击事件
      closeButtons.forEach(btn => {
        btn.addEventListener('click', closeBottom);
      });
      
      // 遮罩层点击事件
      overlay.addEventListener('click', closeBottom);
      
      // 为交互元素添加事件
      addInteractionEvents();
    }
    
    // 处理操作按钮事件
    function handleAction(action) {
      switch(action) {
        case 'like':
          alert('已点赞');
          break;
        case 'comment':
          alert('打开评论区');
          break;
        case 'share':
          alert('打开分享选项');
          break;
        case 'bookmark':
          alert('已收藏');
          break;
        case 'more':
          alert('更多选项');
          break;
      }
    }
    
    // 添加交互事件
    function addInteractionEvents() {
      // 互动按钮事件
      const interactionBtns = document.querySelectorAll('.interaction-btn');
      interactionBtns.forEach(btn => {
        btn.addEventListener('click', function() {
          const icon = this.querySelector('i').className;
          const text = this.textContent.trim();
          
          if (icon.includes('heart')) {
            this.classList.toggle('highlight');
            alert(`点赞状态已切换: ${this.classList.contains('highlight') ? '已点赞' : '取消点赞'}`);
          } else if (icon.includes('comment')) {
            alert('查看全部评论');
          } else if (icon.includes('share')) {
            alert('分享文章');
          } else if (icon.includes('bookmark')) {
            this.classList.toggle('highlight');
            alert(`收藏状态已切换: ${this.classList.contains('highlight') ? '已收藏' : '取消收藏'}`);
          }
        });
      });
      
      // 关注按钮事件
      const followBtn = document.querySelector('.follow-btn');
      if (followBtn) {
        followBtn.addEventListener('click', function() {
          const isFollowing = this.textContent === '已关注';
          this.textContent = isFollowing ? '关注' : '已关注';
          this.style.backgroundColor = isFollowing ? 'var(--primary)' : '#eee';
          this.style.color = isFollowing ? 'white' : '#666';
          alert(`已${isFollowing ? '取消关注' : '关注'} 城市生活报`);
        });
      }
      
      // 评论项点击事件
      const commentItems = document.querySelectorAll('.comment-item');
      commentItems.forEach(item => {
        item.addEventListener('click', function() {
          const author = this.querySelector('.comment-header').textContent;
          alert(`查看${author}的评论详情`);
        });
      });
    }
    
    // 切换底部组件类型
    function switchStyle(style) {
      // 关闭当前打开的底部组件
      if (bottomOpen) {
        closeBottom();
      }
      
      // 更新当前类型
      currentStyle = style;
      
      // 更新容器主题
      container.className = 'container';
      container.classList.add(`theme${style}`);
      
      // 更新所有底部组件的主题
      Object.values(bottomContainers).forEach(container => {
        container.className = container.className.replace(/theme\d+/, '');
        container.classList.add(`theme${style}`);
      });
      
      // 更新切换器选中状态
      switcherOptions.forEach(option => {
        option.classList.remove('active');
        if (option.getAttribute('data-style') === style) {
          option.classList.add('active');
        }
      });
      
      // 更新激活的底部组件
      activeBottom = bottomContainers[style];
    }
    
    // 打开底部组件
    function openBottom() {
      if (!activeBottom) return;
      
      bottomOpen = true;
      activeBottom.classList.add('active', 'bottom-enter');
      overlay.classList.add('active');
      
      // 阻止背景滚动
      document.body.style.overflow = 'hidden';
    }
    
    // 关闭底部组件
    function closeBottom() {
      if (!activeBottom) return;
      
      bottomOpen = false;
      activeBottom.classList.remove('active');
      overlay.classList.remove('active');
      
      // 恢复背景滚动
      document.body.style.overflow = '';
    }
    
    // 启动
    init();
  </script>
</body>
</html>
